package myJs.newPassword

import myJs.CpLayer._
import myJs.Implicits._
import myJs.api.Api
import myJs.assets.assetsCss
import myJs.cps._
import myJs.myPkg.jquery._
import myJs.myPkg.reactHookForm._
import myJs.myPkg.{BackstretchOptions, LayerOptions, NavigateOptions, ReactRouterDOM, layer}
import org.scalajs.dom
import org.scalajs.dom.{URLSearchParams, document}
import org.scalajs.dom.html.Canvas
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Pojo.{EmailData, RegisterUserData, UserNameData}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.web.html._
import typings.csstype.csstypeStrings

import scala.scalajs.js
import scala.scalajs.js.JSConverters._
import scala.scalajs.js.JSON
import myJs.Implicits._
import myJs.{MyPage, Utils}
import shared.pojo.Pojo

@react object Cp {

  type Props = Unit

  private val css = List(
    assetsCss.Layer,
    assetsCss.Sweetalert,
    assetsCss.BootstrapMin,
    assetsCss.BootstrapThemeMin,
    assetsCss.Doc,
    assetsCss.BootstrapDatepicker3,
    assetsCss.FontAwesomeMin,
    assetsCss.Components,
    assetsCss.BootstrapTable,
    assetsCss.Nprogress,
    assetsCss.TableFilter,
    assetsCss.Login5Min
  )

  case class GVerify(kind: String, height: Double, width: Double)

  private val css2 = List(
    assetsCss.BootstrapResponse,
    assetsCss.My
  )

  val component = FunctionalComponent[Props] { props =>
    val useForm = ReactHookForm.useForm(
      UseFormOptions(mode = "onChange", resolver = yupResolver(Schema.schema))
    )

    val navigate = ReactRouterDOM.useNavigate()
    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val email = searchParams.get("email")
    val (info, setInfo) = useState("")
    val (newPassword, setNewPassword) = useState("")
    val (newPasswordAgain, setNewPasswordAgain) = useState("")
    val (name, setName) = useState("")
    object FTool {

      def newPasswordChange = (v: String) => {
        setNewPassword(v)
      }

      def newPasswordAgainChange = (v: String) => {
        setNewPasswordAgain(v)
      }

      def newPasswordExec = () => {
        val request =
          Pojo.NewPassword.Request(name = name, newPassword = newPassword)
        Api.newPassword(request).map { response =>
          navigate(
            s"${MyPage.login.navigatePath}",
            options = NavigateOptions(state =
              js.Dictionary(
                "message" -> s"${name}重置密码成功!",
                "errorClass" -> "text-success"
              )
            )
          )
        }
        ()
      }

      def formSubmit = useForm.handleSubmit((data: js.Dictionary[js.Any]) => {
        println(JSON.stringify(data))
        FTool.newPasswordExec()
      })

    }

    useEffect(
      () => {
        val images =
          List("login_3.jpg", "login_2.jpg", "login_1.jpg").map { name =>
            s"${Api.images}/${name}"
          }.toJSArray
        $(".login-bg").backstretch(
          images = images,
          options = BackstretchOptions(fade = 1e3, duration = 8e3)
        )
      },
      List()
    )

    useEffect(
      () => {
        startLoad
        document.title = s"找回密码-LiveForest"
        loadComplete
      },
      List()
    )

    useEffect(
      () => {
        val request = EmailData(email = email)
        Api.newPasswordBefore(request).map { x =>
          setName(x)
        }
      },
      List()
    )

    div(
      className := "login",
      div(
        className := "user-login-5",
        div(
          className := "row bs-reset",
          div(
            className := "col-md-6 login-container bs-reset",
            TitleInfoCp(),
            div(
              className := "login-content",
              div(
                className := "register",
                h2(
                  className := "page-heading",
                  style := Style(fontSize = 25),
                  "找回密码"
                )
              ),
              form(
                style := Style(maxWidth = 390),
                className := "registration-form form-horizontal",
                onSubmit := FTool.formSubmit,
                span(
                  style := Style(lineHeight = "35px"),
                  className := s"error",
                  info
                ),
                div(
                  className := "form-group",
                  span(
                    className := "text-info col-sm-offset-5",
                    s"正在找回的账号是：${name}"
                  )
                ),
                InputInlineCp(
                  useForm = useForm,
                  value = name,
                  label = "新密码",
                  labelWidth = 4,
                  inputWidth = 8,
                  name = s"newPassword",
                  `type` = "password",
                  onChange = FTool.newPasswordChange
                ),
                InputInlineCp(
                  useForm = useForm,
                  value = name,
                  label = "确认新密码",
                  labelWidth = 4,
                  inputWidth = 8,
                  name = s"newPasswordAgain",
                  `type` = "password",
                  onChange = FTool.newPasswordAgainChange
                ),
                div(
                  className := "actions",
                  button(
                    style := Style(width = "100%"),
                    `type` := "submit",
                    className := "btn btn-primary btn-lg",
                    s" 确定"
                  )
                )
              )
            ),
            div(
              className := "login-footer",
              div(
                className := "row bs-reset",
                div(
                  className := "col-xs-12 bs-reset",
                  div(
                    className := "login-copyright text-right",
                    p(
                      style := Style(color = "black"),
                      "版权所有2018 深圳市绘云生物科技有限公司 All Rights Reserved"
                    )
                  )
                )
              )
            )
          ),
          div(className := "col-md-6 bs-reset", div(className := "login-bg"))
        )
      )
    )
  }

}
